<!DOCTYPE html>
<html class="no-js">
<head lang="en">

    <#include "../head_import.html" />

</head>
<body>
<#include "../include/top_nav.html">
    <div class="am-cf admin-main">

        <!-- sidebar start -->
        <#include "../marketing/left.html">
            <!-- sidebar end -->
            <!-- content start-->
            <div class="admin-content">
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><<@s.m "global.position"/>:  <@s.m "popularityGroup.function"/> - <@s.m "global.edit"/></div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-sm-centered">
                        <form class="ropt">
                            <input type="button" value="<@s.m "global.backToList"/>" onclick="history.back();"/>
                        </form>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-sm-centered">
                        <@p.form id="baseForm" action="o_update.do">
                        <@p.text colspan="2" label="名称" name="name" value=popularityGroup.name required="true" class="required" maxlength="100"/><@p.tr/>
                        <@p.text colspan="2" label="开始时间" name="beginTime" value=popularityGroup.beginTime?string('yyyy-MM-dd HH:mm:ss') required="true" class="required" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /><@p.tr/>
                        <@p.text colspan="2" label="结束时间" name="endTime" value=popularityGroup.endTime?string('yyyy-MM-dd HH:mm:ss') required="true" class="required" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /><@p.tr/>
                        <@p.text colspan="2" label="优惠" name="price" value=popularityGroup.price required="true" class="required number" maxlength="12"/><@p.tr/>
                        <@p.textarea colspan="2" label="活动描述" name="description" value=popularityGroup.description cols="70" rows="3"/><@p.tr/>
                        <@p.td colspan="2">商品搜索：
                        <select id="typeId" name="typeId"><option value="">--所有分类--</option>
                            <#list typeList as productType>
                                <option value="${productType.id}"<#if typeId??> <#if typeId==productType.id>selected="selected"</#if></#if>>${productType.name!}</option>
                            </#list>
                        </select>
                        <select id="brandId" name="brandId"><option value="">--所有品牌--</option>
                            <#list brandList as brand>
                                <option value="${brand.id}"<#if brandId??> <#if brandId==brand.id>selected="selected"</#if></#if>>${brand.name!}</option>
                            </#list>
                        </select>
                        <input id="productName" type="text" name="productName" value="${productName!}" style="width:100px"/>
                        <input type="button" value="<@s.m "global.query"/>" onclick="optSearch();"/>
                    </@p.td><@p.tr/>
                    <@p.td colspan="2">
                    <table  border="0" cellpadding="0" cellspacing="0" class="am-table am-table-striped am-table-hover table-main">
                        <tr>
                            <td>
                                <div>
                                    <div>
                                        <select multiple="multiple" id="select" style="width:210px;height:200px; float:left; border:1px #A0A0A4 outset; padding:1px; ">
                                        </select>
                                    </div>
                                    <div style="float:left;width:60px"> <span id="add">
          <input type="button" class="btn" value=">"/>
          </span><br />
          <span id="add_all">
          <input type="button" class="btn" value=">>"/>
          </span> <br />
          <span id="remove">
          <input type="button" class="btn" value="<"/>
          </span><br />
          <span id="remove_all">
          <input type="button" class="btn" value="<<"/>
          </span> </div>
                                    <div>
                                        <select name="productIds" multiple="multiple" id="productIds" style="width: 210px;height:200px; float:lfet;border:1px #A0A0A4 outset; padding:1px;">
                                            <#list popularityGroup.products as product>
                                                <option value="${product.id}">${product.name!}</option>
                                            </#list>
                                        </select>
                                    </div>
                                </div></td>
                        </tr>
                    </table>
                    <input type="hidden" id="rightlist" name="rightlist">
                </@p.td><@p.tr/>
                <@p.td colspan="2"><@p.hidden name="id" value=popularityGroup.id/><@p.submit code="global.submit"/> &nbsp; <@p.reset code="global.reset"/></@p.td>
        </@p.form>
            </div>
    </div>



    </div>

    </div>

<script type="text/javascript">
$(function() {
	$("#baseForm").validate();
	getList();
	$('#add').click(function() {
	    //获取选中的选项，删除并追加给对方
	        $('#select option:selected').appendTo('#productIds');
	        getList();
	    });
	    //移到左边
	    $('#remove').click(function() {
	        $('#productIds option:selected').appendTo('#select');
	        getList();
	    });
	    //全部移到右边
	    $('#add_all').click(function() {
	        //获取全部的选项,删除并追加给对方
	        $('#select option').appendTo('#productIds');
	        getList();
	    });
	    //全部移到左边
	    $('#remove_all').click(function() {
	        $('#productIds option').appendTo('#select');
	        getList();
	    });
	    //双击选项
	    $('#select').dblclick(function(){ //绑定双击事件
	        //获取全部的选项,删除并追加给对方
	        $("option:selected",this).appendTo('#productIds'); //追加给对方
	        getList();
	    });
	    //双击选项
	    $('#productIds').dblclick(function(){
	       $("option:selected",this).appendTo('#select');
	       getList();
	    });
});
function jsSelectIsExitItem(objSelect, objItemValue) {        
    var isExit = true;        
    for (var i = 0; i < objSelect.options.length; i++) {        
        if (objSelect.options[i].value == objItemValue) {        
            isExit = false;        
            break;        
        }        
    }        
    return isExit;        
}   

function getList(){
    var list =""; 
    for(i=0;i<document.getElementById("productIds").length;i++){   
        list += document.getElementById("productIds").options(i).value+","; 
    } 
    document.getElementById("rightlist").value =list; 
}
function optSearch() {
	$.post('search.do', {
		"typeId" : $("#typeId").val(),
		"brandId" : $("#brandId").val(),
		'productName' : $('#productName').val()
	}, function(data) {
		document.getElementById("select").options.length=0;
        var i=0;
        for(var key in data){
			var newoption=new Option(data[key],key);
			if (jsSelectIsExitItem(document.getElementById("productIds"), key)) {        
				document.getElementById("select").options[i]=newoption;
				i++;
		    }
        }
	}, 'json');
}
</script>

</body>
</html>